<template>
    <div>
  
      <!-- 表单项 -->
      <el-form
        :model="form"
        label-width="100px"
        :rules="rules"
        ref="form"
        style="width: 600px"
      >
        <el-form-item label="商品名称" prop="commondity_name">
          <el-input v-model="form.commondity_name" />
        </el-form-item>
        <el-form-item label="商品描述" prop="commondity_description">
          <el-input v-model="form.commondity_description" />
        </el-form-item>
        <el-form-item label="商品图片" prop="commondity_img">
          <el-upload
            class="commondity-uploader"
            :action="`${UPLOADURL}/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.commondity_img"
              :src="form.commondity_img"
              class="commondity"
            />
            <i v-else class="el-icon-plus commondity-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品价格" prop="commondity_price">
          <el-input v-model="form.commondity_price" />
        </el-form-item>
        <el-form-item label="店铺编号" >
          <el-input v-model="form.petshop_id" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即新增</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item> 
      </el-form>
      
    </div>
  </template>
  
  <script>
  import httpAPi from '@/http/index'
  export default {
    data() {
      return {
        form: {
          commondity_name: "",
          commondity_description: "",
          commondity_img:'',
          commondity_price:'',
          petshop_id:''
         },
        rules: {
            commondity_name: [
            { required: true, message: "请输入商品名称", trigger: "blur" },
          ],
          commondity_description: [
            { required: true, message: "请输入商品描述", trigger: "blur" },
          ],
          commondity_img: [
            { required: true, message: "请选择商品图片", trigger: "blur" },
          ],
          commondity_price: [
            { required: true, message: "请输入商品价格", trigger: "blur" },
          ],
        },
      };
    },
    methods: {
      handleAvatarSuccess(res) {
          console.log(res)
        this.form.commondity_img = res.data;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log("验证通过");
            httpAPi.petshopApi.addShop(this.form).then(res => {
              if(res.data.code==200){
                  this.$message({
                      message:'商品新增成功',
                      type:'success'
                  });
                  //重置表单
                  
              }else{
                  this.$message.error('新增失败')
              }
            })
          } else {
            console.log("验证失败！");
          }
        });
      },
      reset(){
          this.$refs.form.resetFields()
      }
    },
    mounted () {
        let user = this.$store.state.user
        this.form.petshop_id=(user[0].petshop_id)
    },
  };
  </script>
      
  <style lang="scss" scoped>
  .commondity-uploader {
    border: 1px dashed #aaa;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }
  .commondity-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .commondity-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .commondity {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>